// ==UserScript==
// @name         稿定设计去水印V20240718【F5刷新去水印】【一键去白边下载】
// @namespace    https://greasyfork.org/en/users/1089045-tao-yan
// @version      2024.0718
// @require      https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
// @require      https://unpkg.com/gif.js@0.2.0/dist/gif.worker.js
// @require      https://unpkg.com/gif.js@0.2.0/dist/gif.js
// @description  最新F5一键稿定去水印脚本，附按钮一键去白边下载保存。脚本仅供个人学习研究，所得素材资源他用后果自负。
// @author       longmo
// @match        https://www.gaoding.com/editor/design?*
// @match        https://www.focodesign.com/editor/design?*
// @match        https://www.focodesign.com/editor/odyssey?template_id=*
// @resource     gif_worker_js https://unpkg.com/gif.js@0.2.0/dist/gif.worker.js
// @grant        GM_getResourceText
// @grant        GM_getResourceURL
// @license      Creative Commons (CC)
// @downloadURL https://update.greasyfork.org/scripts/499035/%E7%A8%BF%E5%AE%9A%E8%AE%BE%E8%AE%A1%E5%8E%BB%E6%B0%B4%E5%8D%B0V20240718%E3%80%90F5%E5%88%B7%E6%96%B0%E5%8E%BB%E6%B0%B4%E5%8D%B0%E3%80%91%E3%80%90%E4%B8%80%E9%94%AE%E5%8E%BB%E7%99%BD%E8%BE%B9%E4%B8%8B%E8%BD%BD%E3%80%91.user.js
// @updateURL https://update.greasyfork.org/scripts/499035/%E7%A8%BF%E5%AE%9A%E8%AE%BE%E8%AE%A1%E5%8E%BB%E6%B0%B4%E5%8D%B0V20240718%E3%80%90F5%E5%88%B7%E6%96%B0%E5%8E%BB%E6%B0%B4%E5%8D%B0%E3%80%91%E3%80%90%E4%B8%80%E9%94%AE%E5%8E%BB%E7%99%BD%E8%BE%B9%E4%B8%8B%E8%BD%BD%E3%80%91.meta.js
// ==/UserScript==

// https://unpkg.com/gif.js@0.2.0/dist/gif.worker.js
(function () {
    'use strict';

    // 去水印
    function checkblob() {
        const originalCreateObjectURL = URL.createObjectURL;
        URL.createObjectURL = function () {
            return null;
        };
        window.originalCreateObjectURL = originalCreateObjectURL
        const originalBlob = Blob;
        window.Blob = function (...args) {
            return new originalBlob(...args);
        };
    }

    checkblob();

    function downloadImg() {
        // 获取页面上的 canvas 元素
        const canvas = document.querySelector('.infinite-canvas');
        if (!canvas) {
            console.error("Canvas not found");
            return;
        }

        // 获取页面上的 input 元素
        const inputElement = document.querySelector('.dc-rename-input__inner-input');
        if (!inputElement) {
            console.error("Input element not found");
            return;
        }

        // 读取 input 元素的值
        const fileName = inputElement.innerText.trim() + '.png';

        // 将 canvas 转换为 Base64 编码的图像数据
        const imageData = canvas.toDataURL();

        // 创建一个隐藏的 a 标签
        const link = document.createElement('a');
        link.href = imageData;
        link.download = fileName; // 使用 input 的值作为文件名
        link.style.display = 'none';

        // 将 a 标签添加到文档中
        document.body.appendChild(link);

        // 触发点击事件以下载图像
        link.click();

        // 清理：删除 a 标签
        document.body.removeChild(link);
    }

    function addTool() {
        const button = document.createElement('button');
        button.style.position = 'absolute';
        button.style.zIndex = '999';
        button.style.top = '28px';
        button.style.left = '800px';
        button.style.width = '100px';
        button.style.height = '32px';
        button.style.fontSize = '16px';
        button.style.background = '#2254f4';
        button.style.color = '#fff';
        button.innerText = '下载图片';
        document.body.append(button);
        button.onclick = downloadImg;
    }

    addTool();


    function downloadGif() {
        // 获取页面上的 canvas 元素
        const canvas = document.querySelector('.infinite-canvas');
        if (!canvas) {
            console.error("Canvas not found");
            return;
        }

        // 获取页面上的 input 元素
        const inputElement = document.querySelector('.dc-rename-input__inner-input');
        if (!inputElement) {
            console.error("Input element not found");
            return;
        }

        // 读取 input 元素的值
        const fileName = inputElement.innerText.trim() + '.gif';

        // 将 canvas 转换为 Base64 编码的图像数据
        const imageData = canvas.toDataURL("image/gif");

        // 创建一个隐藏的 a 标签
        const link = document.createElement('a');
        link.href = imageData;
        link.download = fileName; // 使用 input 的值作为文件名
        link.style.display = 'none';

        // 将 a 标签添加到文档中
        document.body.appendChild(link);

        // 触发点击事件以下载图像
        link.click();

        // 清理：删除 a 标签
        document.body.removeChild(link);
    }

    function init() {

        let isRecording = false;

        const startRecording = () => {

            const canvas = document.querySelector('.infinite-canvas');
            if (!canvas) {
                console.error("Canvas with class 'infinite-canvas' not found.");
                return;
            }

            let gif;

            if (!isRecording) {
                gif = new GIF({
                    workers: 2,
                    quality: 1,
                    workerScript: GM_getResourceURL("gif_worker_js") // 关键难点
                });

                gif.setOptions({loop: 1, width: 600, height: 600});
                gif.on('finished', blob => {
                    const url = window.originalCreateObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'infinite-canvas-animation.gif';
                    a.click();
                });

                gif.addFrame(canvas.getContext('2d'));
                gif.render()
                // Simulate stop and render the GIF after adding the first frame.
                isRecording = true;
            } else {
                console.log('Recording has already started.');
            }
        };

        // 添加按钮来启动录制
        const button = document.createElement('button');
        button.textContent = 'Record GIF';
        button.style.position = 'fixed';
        button.style.top = '28px';
        button.style.left = '900px';
        button.style.zIndex = 9999;
        button.style.width = '100px';
        button.style.height = '32px';
        button.style.fontSize = '16px';
        button.style.background = '#2254f4';
        button.style.color = '#fff';
        button.addEventListener('click', startRecording);
        document.body.appendChild(button);
    }

    // 加载gif.js库
    init();
})();

